<style>
.input-search {
	margin-top: 10px;
}
</style>

<div class="modal fade bs-modal-md" id="modelContent">
	<div class="modal-dialog modal-md">
		<div class="modal-content"></div>
	</div>
</div>
<div class="portlet light bordered">
	<div class="portlet-title">
		<div class="caption font-dark">
			<i class="fa fa-cog font-dark"></i> <span
				class="caption-subject bold">货品管理 > 货品新增 > 选择分类</span>
		</div>
	</div>
	<div class="portlet-body form">
		<div class="form-group">
			<div class="alert alert-warning">
				<strong> 注：</strong>选择货品分类到底层分类后才可新增货品，有限选择货品分类用以明确新增货品的参数模板，以及其他相关的默认值
			</div>
		</div>
		<form role="form" action="/product/add" class="form-horizontal"
			method="post">
			<div class="form-body">
				<div class="row">
					<div class="form-group">
						<label class="control-label col-md-1" style="text-align: left;">最近使用的分类：</label>
						<div class="col-md-11">
							<select class="bs-select" data-width="65%" id="categoryRecord"
								data-size="10">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-4">
							<select class="form-control multi-select" size="15"
								name="firstCate" id="firstCate" onchange="change(2,this)">
								#foreach($category1 in $!categoryList) #if($!category1.level==1)
								<option value="$category1.id">$!category1.name</option> #end #end
								<option t_level="1" class="addCategroy font-red-flamingo ">新增</option>
							</select>
							<div class="input-group input-search">
								<span class="input-group-addon"> <i class="fa fa-search"></i>
								</span> <select class="bs-select form-control onelevel-div"
									data-live-search="true" data-size="5">
									#foreach($category1 in $!categoryList)
									#if($!category1.level==1)
									<option value="$category1.id">$!category1.name</option> #end
									#end
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<select class="form-control multi-select" size="15"
								name="secondCate" id="secondCate" onchange="change(3,this)">
							</select>
							<div class="input-group input-search secondCate-div"
								style="display: none;">
								<span class="input-group-addon"> <i class="fa fa-search"></i>
								</span> <select class="bs-select form-control secondCate-bs"
									data-live-search="true" data-size="5">
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<select class="form-control multi-select" size="15"
								name="thirdCate" id="thirdCate" onchange="change(4,this)">
							</select>
							<div class="input-group input-search thirdCate-div"
								style="display: none;">
								<span class="input-group-addon"> <i class="fa fa-search"></i>
								</span> <select class="bs-select form-control thirdCate-bs"
									data-live-search="true" data-size="5">
								</select>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="well">
							您当前选的是： <span class="one-level"></span> <span
								class="second-level"></span> <span class="three-level"></span>
						</div>
					</div>
				</div>
			</div>
			<div class="form-actions right">
				<a href="javascript:toAddProduct();" class="btn btn-outline green">下一步</a>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	var userName="$!loginUser.username";
	//  最近使用的数据
    $(function(){
 
    	var array = localStorage.getItem(userName);
 		if(array){
	 		var recordJson = JSON.parse(array);
			for (i=recordJson.length-1;i>0;i--)
			{
				 var rj = recordJson[i];
				 var str = rj.oneLevelName; 
			 	 if(rj.secondLevelId){
			 		str += " -> "+rj.secondLevelName
			 	 }if(rj.thirdLevelId){
			 		str += " -> "+rj.thirdTextName
			 	 }
				 $("#categoryRecord").append("<option t_ol="+rj.oneLevelId+" t_sl="+rj.secondLevelId+" t_tl="+rj.thirdLevelId+"  >"+str+"</option>");
			}
 		}
    	
    })

	//select 选择
	function change(level,obj){
    	var className = $(obj).find("option:selected")[0].className;
		if(className){
			return ;
		}
    	var categoryId = $(obj).val();
		var categoryName = $(obj).find("option:selected").text();
		
		$(".secondCate-div").hide();
		$(".thirdCate-div").hide();
		$.ajax({
			url : "/category/getChildrenCategory",
			type : "get",
			async: false,
			data : {"categoryId":categoryId},
			dataType : "json",
			success : function(data){
				if(level==2){
					$("#secondCate option").remove();
					$("#thirdCate option").remove();
					$(".secondCate-div").show();
					$(".secondCate-bs option").remove()
					for(var i = 0;i<data.length;i++){
						$("#secondCate").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
						$(".secondCate-bs").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
					}
					$("#secondCate").append('<option t_level="2" t_cateId='+categoryId+' class="addCategroy font-red-flamingo ">新增</option>');
					$(".secondCate-bs").selectpicker('refresh');
					
					$(".one-level").text(categoryName);
					$(".second-level").text("");
					$(".three-level").text("");
					
				}else if(level==3){
					$(".secondCate-div").show();
					$(".thirdCate-div").show();
					$("#thirdCate option").remove();
					$(".thirdCate-bs option").remove()
					for(var i = 0;i<data.length;i++){
						$("#thirdCate").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
						$(".thirdCate-bs").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
					}
					
					$("#thirdCate").append('<option t_level="3" t_cateId='+categoryId+' class="addCategroy font-red-flamingo ">新增</option>');
					$(".thirdCate-bs").selectpicker('refresh');
					$(".second-level").text("->"+categoryName);
					$(".three-level").text("");
				}else if(level==4){
					$(".secondCate-div").show();
					$(".thirdCate-div").show();
					$(".three-level").text("->"+categoryName);
				}
			},
			error: function (xhr, ajaxOptions, thrownError) {
				toastr.error("操作失败!");
	        }
		});
	};
	//下一步 
	function toAddProduct() {
		
		var len2 = $('#secondCate option').length ;
		var len3 = $("#thirdCate option").length ;
		if(!$.trim($("#firstCate").val())) {
			toastr.warning("请选择分类！");
			return ;
		}
		if(len2 >1 && !$.trim($("#secondCate").val())) {
			toastr.warning("请选择分类！");
			return ;
		}
		if(len3 >1 && !$.trim($("#thirdCate").val())) {
			toastr.warning("请选择分类！");
			return ;
		}
		
		 
		 var oneLevel= $("#firstCate").val(); //一级
		 var secondLevel = $("#secondCate").val(); //二级
		 var thirdLevel=$("#thirdCate").val();//三级
		 
		 var oneText = $("#firstCate").find("option:selected").text();
		 var secondText = $("#secondCate").find("option:selected").text();
		 var thirdText =$("#thirdCate").find("option:selected").text();
		 
		 var date = new Date();
		 var time = date.getTime();    //获取完整的年份(4位,1970-????)
		 
		var array = localStorage.getItem(userName);
 		if(array){
 			 array =JSON.parse(array);
 		}else{
 			 array =new Array();
 		}
 
		 var data = {
				 date:time,
				 oneLevelId :oneLevel,
				 oneLevelName :oneText,
				 secondLevelId:secondLevel,
				 secondLevelName :secondText,
				 thirdLevelId:thirdLevel,
				 thirdTextName:thirdText
			};
		array.push(data);
		localStorage.setItem(userName, JSON.stringify(array)); 
		
		var url = '/product/add.do?firstCate='+oneLevel ;
		if(len2 >1) {
			url = url +"&secondCate="+secondLevel;
		}
		if(len3 >1) {
			url = url +"&thirdCate="+thirdLevel;
		}
		var pageContentBody = $('.page-content .page-content-body');
		pageContentBody.load(url) ;
	}
	//查询
	$(".onelevel-div").change(function(){
		 var tol = $(this).val();
		 $("#firstCate").find("option[value='"+tol+"']").prop("selected",true);
		 change(2,$("#firstCate"));
	})
	//查询
	$(".secondCate-bs").change(function(){
		 var tol = $(this).val();
		 $("#secondCate").find("option[value='"+tol+"']").prop("selected",true);
		 change(3,$("#secondCate"));
	}) 
	//选中
	$(".thirdCate-bs").change(function(){
		 var tol = $(this).val();
		 $("#thirdCate").find("option[value='"+tol+"']").prop("selected",true);
		 change(4,$("#thirdCate"));
	}) 
	
	
	$("#categoryRecord").change(function(){
		var source = $(this);
		var sed = source.find("option:selected");
		
		var tol = sed.attr("t_ol");
		var t_sl =sed.attr("t_sl");
		var t_tl =sed.attr("t_tl");
		
		$("#firstCate").find("option[selected='selected']").removeAttr("selected");
		$("#firstCate").find("option[value='"+tol+"']").prop("selected",true);
		if(t_sl != "null"){
			change(2,$("#firstCate"));
 			$("#secondCate").find("option[value='"+t_sl+"']").prop("selected",true);
 			change(3,$("#secondCate"));
 			if(t_tl != "null"){
 	 			$("#thirdCate").find("option[value='"+t_tl+"']").prop("selected",true);
 	 			change(4,$("#thirdCate"));
 			}
		}
		
	})
	
	// 双击 新增分类
	$(".form-body").on("dblclick",".addCategroy",function(){
		var cateId = $(this).attr("t_cateId");
		$('#modelContent').modal('show')
		var pageContentBody = $(".modal-content");
        $.ajax({
            type: "GET",
            cache: false,
            url: "/category/add?id="+cateId,
            dataType: "html",
            success: function (res) {
                App.stopPageLoading();
                pageContentBody.html(res);
                $(".add-category").attr("thref","/product/toAdd/Step1");
                
                Layout.fixContentHeight(); // 修复内容高度
            },
            error: function (xhr, ajaxOptions, thrownError) {
                pageContentBody.html('<h4>服务器异常!</h4>');
                App.stopPageLoading();
            }
        });
		
	});
</script>
<script src="/assets/plugins/bootstrap-select/js/components-bootstrap-select.js" type="text/javascript"></script>
